<!DOCTYPE html>
<html>

<head>
    <title>CSS rotateZ() function</title>
  <!-- 绕图形中心旋转 -->
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        .rotateZ_image {
            animation: ro 10s linear 0ms infinite normal;

        }

        @keyframes ro {
            0% {
                transform: rotateZ(-45deg)
            }

            25% {
                transform: rotateZ(0)
            }

            50% {
                transform: rotateZ(45deg)
            }

            75% {
                transform: rotateZ(0deg)
            }

            100% {
                transform: rotateZ(-45deg)
            }
        }
    </style>
</head>

<body>
    <h1>旋转</h1>
    <h2>CSS rotateZ() 函数</h2>

    <br><br>

    <img class="rotateZ_image" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo">
</body>

</html>